{extend name="Base" /}
{block name="title"}{$title}{/block}
{block name="body"}
<link rel="stylesheet" type="text/css" href="/css/backend/custom.css?{:VER}"/>
<fieldset class="layui-elem-field layui-field-title">
	<legend>{$name}</legend>
</fieldset>

<form class="layui-form layui-form-pane">
	<div class="layui-form-item">
		<label class="layui-form-label">用户名</label>
		<div class="layui-input-inline">
			<input type="text" name="username" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid layui-word-aux">帐号长度必须在 2~18 个字符之间</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">邮箱</label>
		<div class="layui-input-inline">
			<input type="text" name="email" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">密码</label>
		<div class="layui-input-inline">
			<input type="password" name="password" lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid layui-word-aux">密码长度必须在 6~32 个字符之间</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">用户组</label>
		<div class="layui-input-inline">
			<select name="isadmin" lay-verify="required">
				{volist name="group" id="vo"}
				<option value="{$vo.id}">{$vo.name}</option>
				{/volist}
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-inline">
			<button class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
		</div>
	</div>
</form>
<script>
	layui.use(['form', 'layer'], function () {
		var form = layui.form;
		var layer = layui.layer;

		//自定义验证规则
		form.verify({
			username: [/(.+){2,18}$/, '帐号长度必须在 2~18 个字符之间'],
			pwd: [/(.+){6,32}$/, '密码长度必须在 6~32 个字符之间']
		});

		//监听提交
		form.on('submit(submit)', function (data) {
			var str = data.field;
			$.ajax({
				type: "POST",
				url: "/backend/users/doAdd",
				cache: false,
				data: str,
				dataType: "json",
				success: function (e) {
					if (e.status === 1) {
						layer.alert(e.message, {
							//成功图标
							icon: 1
						});
					} else if (e.status === 0) {
						layer.alert(e.message, {
							//失败图标
							icon: 2
						});
					} else {
						layer.alert("系统错误，请稍后重试", {
							//失败图标
							icon: 2
						});
					}
				}
			});
		});
	});
</script>
{/block}